<template>
  <div v-drag>
    <div class="mask"  @click="closePopup(false)"></div>
    <div class="edit_box" v-loading="loading">
      <div class="box_head" v-if="type == 1">
        <p>「{{userName}}」备注</p>
        <i  @click="closePopup(false)"></i>
      </div>

      <div class="box_head" v-if="type == 2">
        <p>「{{userName}}」用户替换销售</p>
        <i  @click="closePopup(false)"></i>
      </div>

      <template v-if="type ==1">
        <div class="box_body" >
          <div class="line">
            <span class="lab"><i class="mark_icon">*</i>备注：</span>
            <div :class="{'error_border':tip_num===1}">
              <el-input type="text" placeholder="请输入备注" v-model.trim="remarks"></el-input>
            </div>
          </div>
          <p class="error_line">{{ tips }}</p>
        </div>
      </template>

      <template v-if="type==2">
        <div class="box_body" >
          <div class="line">
            <span class="lab"><i class="mark_icon">*</i>销售：</span>
            <div :class="{'error_border':tip_num===1}">
              <el-select
                filterable
                placeholder="请选择销售"
                v-model="refereeIds"
                @change="getName"
                value-key="id" >
                <el-option
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                  v-for="(item,index) in refereeOptions">
                </el-option>
              </el-select>
            </div>
          </div>
          <p class="error_line">{{ tips }}</p>
        </div>
      </template>

      <div class="box_foot">
        <span @click="closePopup(false)">取消</span>
        <span @click="confirm">确定</span>
      </div>
    </div>
  </div>
</template>

<script>
import { refereeList } from "@/api/sys/user";
import { replaceSell,remark,getDetail } from "@/api/data/user/";
export default {
  props:['userId','type'],
  data(){
    return {
      refereeOptions:[],
      loading:false,
      refereeIds:'',
      refereeName:'',
      tip_num:'',
      tips:'',
      remarks:'',
      userName:''
    }
  },
  mounted() {
    this.getRefereeList();
    this.getDetail();
  },
  methods:{
    getDetail(){
      let that = this;
      that.loading = true;
      getDetail(that.userId).then(res => {
        if (res){
          let obj  = res;
          this.userName = obj.wxName?obj.wxName:'';
          this.refereeIds = obj.refereeId?obj.refereeId:'';
          this.refereeName = obj.refereeName ? obj.refereeName:'';
          this.remarks = obj.remark ?  obj.remark : '';
        }
        that.loading = false;
      }).catch((e) => {
        that.loading = false;
      });
    },

    getRefereeList() {
      refereeList().then(res=> {
        this.refereeOptions = res ? res:[];
      })
    },


    getName(val){
      let that = this;
      that.refereeOptions.forEach((item)=>{
        if (val===item.id){
          that.refereeName = item.name;
        }
      })
    } ,

    //确定
    confirm() {
      if(this.type == 1) {
        if(this.remarks == '') {
          this.tip_num = 1;
          this.tips = '请输入备注!';
          return;
        }
        this.sendMark();
      }else {
        if(this.refereeIds == '') {
          this.tip_num = 1;
          this.tips = '请选择销售员!';
        }else {
          this.tip_num = '';
          this.tips = '';
          this.$confirm('确定将用户「'+this.userName+'」的销售替换成'+this.refereeName+'?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.sendInfo();
          }).catch(() => { })
        }
      }

    },
    sendInfo() {
      let queryParams = {
        userId:this.userId,
        refereeId:this.refereeIds
      };
      replaceSell(queryParams).then(res=> {
        this.closePopup(true);
        this.$message.success({
          message:'交换成功！',
          duration:1500
        });
      }).catch((e)=> {
        this.loading = false;
      })
    },
    sendMark() {
      let queryParams = {
        userId:this.userId,
        remark:this.remarks
      };

      remark(queryParams).then(res=> {
        this.closePopup(true);
        this.$message.success({
          message:'备注成功！',
          duration:1500
        });
      }).catch((e)=> {
        this.loading = false;
      })
    },

    // 关闭
    closePopup(refresh){
      this.$emit('listenToChild', {refresh: refresh})
    }
  }
}
</script>

<style scoped>
.avatar {
  width: 70px;
  height: 70px;
  border-radius: 8px;
  overflow: hidden;
}
.money {
  color: #f7ab20
}
.time {
  color:#e40000
}
.flex_center {
  width:100%;
  text-align: center;
  height:50px;
  line-height: 50px;
  color:red;
}
</style>

